<template>
  <div class="newmusci">
    <p>
      <span>最新音乐</span>
      <van-icon name="arrow" class="ic"/>
    </p>
    <ul>
      <li v-for="(key,item) in pic">
        <span><img :src=pic[item] alt=""></span>
        <br>
        <span class="text">
           {{muid[item]+'\n'+name[item]}}
          </span>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "newmusic",
      data(){
        return{
          textarr:['推荐合口味的歌','Feel Special\nTWICE',
            '好饿好饿好饿\nSHINJIRO ATAE/青龙啊啊啊啊啊','霉霉新专甜蜜上线','Trampoline\nShaed/ZAYN',
            '我和我的祖国 青春版\n周东雨/许魏洲/关晓彤'],
          imgarr:[require('../../img/new1.png'),require('../../img/new2.png'),require('../../img/new3.png'),
            require('../../img/new4.png'),require('../../img/new5.png'),require('../../img/new6.png')],
          pic:[],
          muid:[],
          name:[],
        }
      },
      created(){
          this.$http.get('http://localhost:3000/personalized/newsong')
            .then((res)=>{

              for(let i = 0; i < 6; i ++){
                this.pic.push(res.data.result[i].song.album.picUrl);
                this.muid.push(res.data.result[i].name);
                this.name.push(res.data.result[i].song.artists[0].name);
              }
            })
      }
    }
</script>

<style lang="scss">
  .newmusci{
    box-sizing: border-box;
    padding:55px 15px 0 15px;
  p{
    box-sizing: border-box;
    padding-bottom: 40px;
    font-size: 50px;
    font-weight: bold;
  span{
    vertical-align: middle;
  }
  .ic{
    width: 27px;
    vertical-align: middle;
  }
  }
  ul{

    font-size: 0;

  li{
    width: 33.3333333%;
    list-style: none;
    display: inline-block;
    font-size: 30px;

    padding-bottom: 60px;
    box-sizing: border-box;
  .text{
    box-sizing: border-box;
    padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 95px;
    width: 360px;
    font-size: 35px;
  }
  img{
    width: 395px;
    height: 400px;
  }
  }
  }
  }
</style>
